<!--头部导航-->
<template>
    <div>
        <van-sticky>
             <div id="head_bar">
            <van-icon class="l" name="arrow-left" @click="fun()"/>
            <van-icon class="l" name="cross" @click="x()"/>
            <span class="headline">交易流程揭秘</span>
            <van-icon class="r" name="share" @click="show = true"/> 
            <van-action-sheet v-model="show"   cancel-text="取消" close-on-click-action >
                <!--分享方式-->
                <button class="van-action-sheet__item">
                     <img class="van-action-sheet__img" src="images/share_03.png" alt="">
                     <span class="van-action-sheet__name">微信</span>
                </button>
                <button class="van-action-sheet__item">
                     <img class="van-action-sheet__img" src="images/share_05.png" alt="">
                     <span class="van-action-sheet__name">朋友圈</span>
                </button>
                <button class="van-action-sheet__item">
                     <img class="van-action-sheet__img" src="images/share_07.png" alt="">
                     <span class="van-action-sheet__name">QQ</span>
                </button>
                <button class="van-action-sheet__item">
                     <img class="van-action-sheet__img" src="images/share_09.png" alt="">
                     <span class="van-action-sheet__name">短信</span>
                </button>
                <button class="van-action-sheet__item">
                     <img class="van-action-sheet__img" src="images/share_15.png" alt="">
                     <span class="van-action-sheet__name">链接</span>
                </button>
            </van-action-sheet>
       </div>
        </van-sticky>
    </div>
</template>

<script>


export default {
    data() {
        return {
            show: false,
        };
    },
    methods: {
        fun(){
            this.$router.go(-1)
        },
        x(){
            this.$router.push("/")
        },
    },
}
</script>

<style scoped>
      #head_bar{
        width: 100%;
        height: 50px;
        border-bottom: 1px #fafafa solid;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
        background: #ffffff;
        
    }
    #head_bar .headline{
        font-size: 16px;
        font-weight: 700;
        color: black;
        
    }
    .van-icon{
        line-height: 30px;
        padding: 0 30px;
        font-size: 16px;
        font-weight: 500;
    }
    
    .van-popup {
        padding-top: 10px;
    }
    .van-action-sheet__item{   
        width: 25%;
        float: left;  
        font-size: 16px;
        color: #a8a8a8;
        padding: 16px 0 16px 0;
    }
    
    .van-action-sheet__img{
        margin: 0 auto;
        margin-bottom: 16px;
    }
    .van-action-sheet__name{
        padding: 16px 0;
    }
    .van-action-sheet__gap{
        height: 10px;
        background-color: #f7f8fa
    }

    .van-action-sheet__cancel{
        font-size: 16px;
        font-weight: 600;
        color: black;
        padding: 5px;
        border-top: 1px #f9f9f9 solid;
    }




</style>